Современная WEB-разработка

1. СОВРЕМЕННАЯ WEB-РАЗРАБОТКА. МОДУЛЬ 1

Установка программы для работы. Visual Studio Code            

                Занятие 1. Погружение в мир сайтов. Что скрывается за буквами HTML?     

Первый код на HTML.  Заголовки.  Абзацы. Форматирование. Контрольные вопросы.

                Занятие 2. Секреты языка HTML: как добавить волшебство на страницы?  

Списки. Картинки. Ссылки. Основные теги структурирования страницы. <header> — верхняя часть страницы. Таблицы. Контрольные вопросы. Домашнее задание № 1

                Занятие 3. Создаём главную страницу мечты! Стили и магия CSS

Селектор тегов              . Селектор идентификаторов. Селектор классов. Комбинирование селекторов. Контрольные вопросы.

                Занятие 4. CSS: как сделать элементы сайта идеальными? Отступы и поля               

Псевдоклассы и Псевдоэлементы. Специальные цвета. Прозрачность. Цвет фона. Размеры. Отступы и поля. Центрирование. Границы. Свойство float. Контрольные вопросы.

                Занятие 5. Мастер выравнивания: аккуратные страницы с CSS!        

Выравнивание с FlexBox Layout. flex-wrap. justify-content. align-content. align-items. Добавление стилей к сайту «Выручай Школа». Контрольные вопросы. Домашнее задание № 2.

                Занятие 6. JavaScript на страже сайта: переменные и команды

Введение в JavaScript. Java?.. Средства разработчика. Переменные. Арифметические операторы JavaScript. Document Object Model. Текстовые поля. Кнопки. linear-gradient. cursor: стиль курсора мыши. Взаимодействие с элементами. Контрольные вопросы.

                Занятие 7. Функции и события: прокачиваем калькулятор с JavaScript!        

Функции. События. Поиск ошибок. Логический тип. Операторы сравнения. Условные конструкции. Конструкция If                . Конструкция switch/case/default. Логические операторы. Конъюнкция. Дизъюнкция. Отрицание. Доработка калькулятора. Контрольные вопросы. Домашнее задание № 3       

                Занятие 8. Циклы, как в калейдоскопе! Оживляем сайт с помощью Math

While. For. Math в JavaScript. Генерация случайного числа в диапазоне. Создание элементов. Изменение стилевых свойств элементов. Контрольные вопросы.

                Занятие 9. Подготовка к большому тесту: как организовать данные?            

Словари. Массивы. Комбинирование структур. Использование кавычек и апострофов в JavaScript. Заготовки к созданию теста. Контрольные вопросы.

                Занятие 10. Квиз-турнир: проверь свои знания собственным тестом!           

Разметка страницы. Массив с вопросами и ответами. Переменные для текущего вопроса и счета. Функция для перемешивания элементов массива. Функция для отображения текущего вопроса и вариантов ответов. Функция для проверки ответа и перехода к следующему вопросу. Функция для отображения результата теста. Запуск теста. В общем виде код выглядит следующим образом. Контрольные вопросы    . Домашнее задание № 4.

                Занятие 11. Превращаем экран в холст: инструменты для рисования на сайте!      

Тег <label>. Элементы формы <input type="range"> и <input type="color">. Тег <canvas>. Контрольные вопросы.

                Занятие 12. Финальные штрихи. Как закончить и сохранить свой шедевр?

Основы взаимодействия с <canvas> и JavaScript. Написание кода JavaScript для страницы «Рисовалка». Переменные для рисования. Функции рисования. События мыши для рисования. Обновление индикатора текущего цвета.  Обновление ссылки для скачивания. Создание кнопок выбора цвета. Кнопка ластика. Кнопка очистки холста. Кнопка для своего цвета. Запуск кода. В общем виде код выглядит следующим образом. Контрольные вопросы. Домашнее задание № 5. Проект.

1. CОВРЕМЕННАЯ WEB-РАЗРАБОТКА. МОДУЛЬ 2. в процессе обновления

1. СОВРЕМЕННАЯ WEB-РАЗРАБОТКА. МОДУЛЬ 3. В процессе обновления